<template>
    <div>

        <List item-layout="vertical" size="small" :split="false">

            <ListItem v-for="item in commentList" :key="item.id">
                <ListItem>
                    <Avatar shape="square" size="small" :src="item.avatar"></Avatar>&nbsp;<span
                        style="color: #2d9aff">{{item.nickname}}</span>
                    <li style="margin-left: 30px">{{item.content}}</li>
                    <template slot="action">
                        <li>
                            <Icon type="ios-calendar-outline"/>
                            {{dateFilter(item.createTime)}}
                        </li>
                        <li>
                            <span @click="showCommentInput(item,item)"><Icon type="ios-chatbubbles-outline"/> 回复</span>

                        </li>
                    </template>
                </ListItem>

                <div v-if="item.replyComments" class="reply">
                    <Reply :replyComment="item.replyComments" :comment='item'
                           v-on:showCommentInput="showCommentInput"></Reply>
                </div>
                <Divider/>
            </ListItem>
        </List>

        <div id="target">
            <Input
                    v-model="inputComment"
                    type="textarea"
                    :rows="3"
                    :placeholder="placeholders">
            </Input>
            <div style="text-align: right;margin-top: 10px">
                <Button @click="cancel" style="margin-right: 10px">取消</Button>
                <Button type="primary" round @click="commitComment">确定</Button>
            </div>
        </div>
    </div>
</template>

<script>

    import Reply from './Reply'

    export default {
        components: {
            Reply,
        },
        name: 'Comment',
        props: {
            commentList: Array,
            blogId: null,
        },
        data() {
            return {
                //评论内容
                inputComment: '',
                //输入框默认内容
                placeholders: '写下你的评论',

            }
        },

        methods: {
            /**
             * 点击取消按钮
             */
            cancel() {
                this.inputComment = '';
                this.placeholders = '写下你的评论';
                this.fromId = null;
            },
            /**
             * 提交评论
             */
            async commitComment() {
                const redata = JSON.parse(window.sessionStorage.getItem("user"));
                if (!redata) {
                    this.$Message.warning({
                        background: true,
                        content: '发表评论请先登录！',

                    });
                    scrollTo(0, 0);
                } else {
                    if (!this.inputComment) {
                        this.$Message.warning({
                            background: true,
                            content: '评论信息不能为空！',

                        });
                    } else {
                        const comment = {
                            nickname: redata.nickname,
                            content: this.inputComment,
                            avatar: redata.headimgurl,
                            blog: {id: this.blogId,},
                            pid: this.fromId,
                            token: redata.token
                        };
                        const {data: result} = await this.$http.post("saveComment", comment);
                        if (result.code === 200) {
                            //调用父类blog中的根据blogid获取评论信息的方法
                            this.$Message.success(result.message)
                            this.$emit("on-comment", this.blogId);

                        }
                    }
                }
                this.placeholders = '写下你的评论';
                this.inputComment = '';
            },
            //根据id查询该博客的评论信息
            async showCommentById(id) {
                const {data: result} = await this.$http.get("getListByBlogId/" + id)
                if (result.code === 200) {
                    this.commentList = result.data
                } else {
                    this.$Message.success(result.message)
                }
            },
            /**
             * 点击评论按钮显示输入框
             * item: 当前大评论
             * reply: 当前回复的评论
             */

            showCommentInput(item, reply) {
                if (reply) {
                    this.placeholders = "@" + reply.nickname + " "
                } else {
                    this.inputComment = ''
                }
                //当点击了回复时，页面滚动到评论框的位置
                document.getElementById("target").scrollIntoView();
                this.fromId = reply.id
            },
            //格式化时间的方法
            dateFilter: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
                var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
                var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
                return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
            },
        },
    }

</script>

<style scoped lang="less">
    .reply {
        margin-left: 15px;
    }

</style>



